Day 19 Music 我們建立了只能播放一首歌的音樂播放器。 這次想要加上 File ，可以從手機挑選音樂播放。

安裝套件 File

npm install cordova-plugin-file
npm install @ionic-native/file
ionic cap sync

安裝套件 File Chooser

npm install cordova-plugin-filechooser
npm install @ionic-native/file-chooser
ionic cap sync

安裝套件 File Path

npm install cordova-plugin-filepath
npm install @ionic-native/file-path
ionic cap sync

在 app.module.ts 中引入

在 music.page.html

在 music.page.ts
引入跟宣告

實作 selectMusic() 方法
用 FileChooser 取得 uri 然後在用 filePath.resolveNativePath 去解析。
uri:content://com.android.providers.downloads.documents/document/raw%3A%2Fstorage%2Femulated%2F0%2FDownload%2FBvG%20-%20Mama%20I%20Love%20You%20(%E7%A7%80%E9%80%97%E6%B3%B0%E5%B1%B1%E9%98%BF%E9%81%94OP).mp3
filePath: file:///storage/emulated/0/Download/BvG - Mama I Love You (秀逗泰山阿達OP).mp3

結果

小結語
FileChooser & FilePath 的部分反而比較簡單。
反而是昨天的 Media 糗了，取得 filePath 本來想要重置 Duration，但是一直沒有辦法抓到 Media.GetDuration(); 導致我音樂可以播，但是 ion-Range 整個廢了 (debug 中)。

(後續補充) dubug 之後的修改

原來的版本，因為他跑了一個 setInterval 去計算 ion-range 的位置，加上我選擇檔案後要去設置新的 duration，也需要用 setInterval 去取得 ，就這樣兩個 setInterval 交互影響我的 duration 變數。

所以第一步 加了個 Promise
this.stop(); 關閉音樂
clearInterval(this.getPositionInterval); 關閉計算 ion-range 的位置的setInterval
確認關閉後，在接著再一個 Promise 執行 用來取得新音樂 duration 的 getDurationInterval。
確認取得 duration 之後接著再設置新增 media 播放。

  selectMusic() {
    this.fileChooser
      .open()
      .then((uri) => {
        this.filePath
          .resolveNativePath(uri)
          .then((filePath) => {
            this.stop();

            const promise1 = new Promise((resolve, reject) => {
              clearInterval(this.getPositionInterval);
              this.getPositionInterval = null;
              resolve();
            }).then(() => {
              this.songName = filePath;
              this.songCover = 'assets/album/music.jpg';

              this.myMusic = this.media.create(filePath);
              this.myMusic.play();
              this.myMusic.setVolume(0.0);

              const promise2 = new Promise((resolve, reject) => {
                let duration1 = -1;
                let temp = duration1;
                this.getDurationInterval = setInterval(() => {
                  console.log('getDurationInterval');

                  if (duration1 === -1 || !duration1) {
                    duration1 = ~~this.myMusic.getDuration();
                  } else {
                    if (duration1 !== temp) {
                      temp = duration1;
                    } else {
                      this.myMusic.stop();
                      this.myMusic.release();
                      clearInterval(this.getDurationInterval);
                      resolve(duration1);
                    }
                  }
                }, 100);
              }).then((aaa) => {
                this.position = 0;
                this.displayPosition = '00:00';
                this.duration = aaa;
                this.myMusicFile = filePath;
                this.displayDuration = this.toHHMMSS(aaa);
                this.setToPlayback(filePath);
              });
            });
          })
          .catch((err) => console.log(err));
      })
      .catch((e) => console.log(e));
  }

又結語，使用別人的東西，差一點改不動 (汗

又結果